<template>
	<div class="serach">
		<div class="innerBox">
			<a @click="toDetail(item)" v-for="(item,index) in imgList" :key="item.imgId" href="###">
				<img :src="`${baseUrl}/${item.userId}/uploads/${item.imgPath}`" alt="">
				<div>
					<span v-for="(item,index) in item.tags" :key="index">{{item}}</span>
				</div>
			</a>
			<button @click="getMore" class="getmore">获取更多....</button>
		</div>
	</div>
</template>

<script>
	export default {
		name:'serach',
		data(){
			return{
				baseUrl:'http://127.0.0.1:5000',
				page:1,
				//控制截取下标
				end:9,
				keyWork:'',
				//搜索出来的总数
				totalList:[],
				//加载在页面中的壁纸数
				imgList:[],
			}
		},
		
		// props:['tags'],
		mounted(){
			this.keyWork = this.$route.query.tags
			this.getImgList()
			
		},
		beforeDestroy(){
			this.keyWork = ''
		},
		
		watch:{
			'$route.query.tags'(newValue,oldValue){
				this.keyWork = this.$route.query.tags
			},
			keyWork(){
				this.getImgList()
			}
		},
		
		methods:{
			getMore(){
				if(this.end%9!=0){
					alert("抱歉,没有更多了")
				}else{
					this.page++
					if(this.totalList.slice((this.page-1)*9).length<9){
						this.end = this.end+this.totalList.slice((this.page-1)*9).length
						this.totalList.slice((this.page-1)*9).forEach(item=>{
							this.imgList.push(item)
						})
					}else{
						this.end = this.page*9
						this.totalList.slice((this.page-1)*9,this.end).forEach(item=>{
							this.imgList.push(item)
						})
					}
				}
				
			},	
			toDetail(item){
				console.log(item)
				this.$router.push({
					path:'/imgDetails',
					query:{
						imgDetail:JSON.stringify(item)
					}
				})
			},
			getImgList(){
				this.page =1
				this.end = 9
				this.$api.commonApi.serachImg(this.keyWork).then(res=>{
					if(res.status==200&&res.data.status==200){
						console.log(res)
						this.totalList = res.data.List
						this.totalList.forEach(item=>{
							item.tags = item.tags.split(',')
						})
						//先加载九张,点击加载更多再去往imgList里面添加数据
						if(this.totalList.length<=9){
							this.end = this.totalList.length
						}
						this.imgList =this.totalList.slice((this.page-1)*9,this.end)
						
					}else{
						alert("抱歉,好像没有数据")
					}
				})
			}
			
		}
	}
</script>

<style lang="less" scoped>
	.serach{
		min-height: 100vh;
		background-color: #333;
		padding-top: 120px;
		.innerBox{
			width: 1000px;
			display: flex;
			margin: 0 auto;
			flex-wrap: wrap;
			
			a{	
				overflow: hidden;
				position: relative;
				img{
					width: 300px;
					height: 250px;
					border-radius: 5px;
					margin-left: 33px;
					margin-top: 10px;
				}
				div{
					position: absolute;
					width: 300px;
					height: 30px;
					background-color: rgba(56, 56, 56, 0.7);
					left: 33px;
					border-radius: 3px;
					span{
						margin-left: 10px;
						color: greenyellow;
						font-size: 12px;
					}
				}
			}
			
			a:hover div{
				transition: all 0.3s;
				margin-top: -50px;
			}
			
			.getmore{
				width: 900px;
				height: 40px;
				background-color: #333;
				color: white;
				cursor: pointer;
				margin-left: 65px;
			}
		}
	}
</style>